<!--
 * @Author: coocase
 * @Date: 2021-04-19 17:01:04
 * @LastEditTime: 2021-05-13 14:59:11
 * @LastEditors: coocase
 * @Description: 
 * @FilePath: \git\dami\src\components\Sider.vue
-->
<template>
    <div class="sider">
        <MenuItem name="recommend" class="recommend">
            <Icon type="ios-paper" />
            你可能还喜欢
        </MenuItem>
        <Card class="item"
         v-for=" data in datas"
          :key="data.name"
          :bordered="false"
          @click.native="$toDetail(data.title)"
          >
            <div
                class="item-img"
                :style="{'background-color': data.imgUrl}"
            ></div>
            <div class="item-info">
                <p class="item-title">{{data.title}}</p>
                <p class="item-locate">{{data.address}}</p>
                <p class="item-itemName">{{data.date}}</p>
                <p class="item-price">票价： ￥{{data.unitPrice}}</p>
            </div>
        </Card>
    </div>
</template>

<script>
export default {
    name: "resultSider",
    data(){
       return {
           datas:""
       } 
    },
    methods:{
        getslider:function () {  
            this.$http.getRequest({
                    api:'sider',
                    data:{}
                }).then((res) => {
                    this.datas = res.datas;
                }).catch((err) => {
                    console.log(err)
                });
        }
    },
    mounted:function () {
        this.getslider();
    }
    
};
</script>

<style scoped>
.sider{
    margin-left: 10px;
}
.recommend{
    font-size: 18px;
}
.item{
    height: 200px;
    margin-bottom: 10px;
}
.item:hover{
    cursor: pointer;
}
.item-img{
    display: inline-block;
     width: 100px;
    height:150px;
    border: none;
    background-color: rgb(67, 69, 204);
}
.item-info{
    display: inline-block;
}

.item-itemName,.item-price,.item-date,.item-locate,.item-title{
    
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 10px;
    font-size: 12px;
}
.item-title{
   font-size: 16px; 
   font: bolder;
   margin-bottom: 40px;
}
</style>